<template>
  <el-dialog v-model="show" title="添加用户" width="700" class="p-r-10" :draggable="true" :close-on-click-modal="false">
    <el-alert show-icon
              type="info"
              :closable="false"
              class="m-b-15"
              description="密码必须8位或8位以上，并且必须包含大小写字母和数字和特殊字符 ~!@#$%^&*()_+|<>,.?/:;'[]{}" />
    <el-form ref="formRef" :model="form" :rules="rules" status-icon label-width="90px" class="p-r-20">
      <el-row>
        <el-col :span="14">
          <el-form-item label="账号" prop="account">
            <el-input v-model.trim="form.account" maxlength="50" show-word-limit>
              <template #prefix>
                <span class="iconfont iaiai-user1 c-c"></span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="form.password" show-password maxlength="50" placeholder="必须包含大小写字母+数字+特殊字符">
              <template #prefix>
                <span class="iconfont iaiai-lock c-c"></span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="form.name" maxlength="50" show-word-limit>
              <template #prefix>
                <span class="iconfont iaiai-user1 c-c"></span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.trim="form.phone" maxlength="11" show-word-limit>
              <template #prefix>
                <span class="iconfont iaiai-phone c-c"></span>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="头像">
            <uploadImgSingle ref="uploadImgSingleComp"
                             :size="2"
                             :show-tip="true"
                             @onsuccess="uploadAvator"
                             @remove="removeImg" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="角色" prop="roleIds">
            <el-select
                v-model="form.roleIds"
                multiple
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择"
                style="width: 240px">
              <el-option
                  v-for="item in roles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio-button :value="0">
                <template #default>
                  <span class="iconfont iaiai-sex m-r-5"></span>未知
                </template>
              </el-radio-button>
              <el-radio-button :value="1">
                <template #default>
                  <span class="iconfont iaiai-male m-r-5"></span>男
                </template>
              </el-radio-button>
              <el-radio-button :value="2">
                <template #default>
                  <span class="iconfont iaiai-female m-r-5"></span>女
                </template>
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门">
            <el-select
                v-model="form.deptIds"
                multiple
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择"
                style="width: 240px">
              <el-option
                  v-for="item in depts"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位">
            <el-select
                v-model="form.postIds"
                multiple
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择"
                style="width: 240px">
              <el-option
                  v-for="item in posts"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model.trim="form.email" maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" maxlength="500" show-word-limit/>
      </el-form-item>
      <el-form-item label="禁用">
        <el-switch v-model="form.disabled" :active-value="1" :inactive-value="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="hideComp" style="padding: 0 20px" v-if="!loading">
        <span class="iconfont iaiai-close f20 m-r-5"></span>
        取消
      </el-button>
      <el-button type="primary" style="padding: 0 20px" :loading="loading" @click="add" plain>
        <span class="iconfont iaiai-correct f20 m-r-5" v-if="!loading"></span>
        保存
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, defineExpose, defineEmits, inject} from "vue"
import uploadImgSingle from '@/components/upload_img_single.vue'
import {FormInstance, FormRules} from "element-plus"
import {validateEmail, validatePassword, validatePhone} from "@/core/util/validate_util"
import {types} from "sass";
import List = types.List;

const $api = inject('$api')
const $post = inject('$post')
const $toast = inject('$toast')
const emit = defineEmits(['onsuccess'])
const show = ref(false)
const loading = ref(false)
const depts = ref([])
const posts = ref([])
const roles = ref([])
const uploadImgSingleComp = ref(null)

interface RuleForm {
  avatar: string
  account: string
  password: string
  name: string
  gender: number
  remark: string
  disabled: number
  phone: string
  email: string
  deptIds: []
  postIds: []
  roleIds: []
}

const formRef = ref<FormInstance>()
const form = ref<RuleForm>({
  avatar: "",
  account: "",
  password: "",
  name: "",
  gender: 0,  //性别，0(空)未知，1男，2女
  remark: "",
  disabled: 0,
  phone: "",
  email: "",
  deptIds: [],
  postIds: [],
  roleIds: [],
})

const rules = ref<FormRules<RuleForm>>({
  account: [
    { required: true, message: '请设置账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请设置密码', trigger: 'blur' },
    { validator:validatePassword, trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请设置姓名', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请设置手机号', trigger: 'blur' },
    { validator:validatePhone, trigger: 'blur' },
  ],
  roleIds: [
    { required: true, message: '请选择角色', trigger: ['change'] },
  ],
  email: [
    { validator:validateEmail, trigger: 'blur' },
  ],
})

function add(){
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true

      $post($api.userAdd,form.value).then((res:any)=>{
        loading.value = false
        show.value = false
        emit('onsuccess')
        formRef.value.resetFields()
        $toast.success('保存成功')
      }).catch((err:any)=>{
        loading.value = false
      })
    }
  })
}

function showComp(){
  form.value.avatar = ""
  form.value.account = ""
  form.value.password = ""
  form.value.name = ""
  form.value.phone = ""
  form.value.gender = 0
  form.value.email = ""
  form.value.remark = ""
  form.value.disabled = 0
  form.value.deptIds = []
  form.value.postIds = []
  form.value.roleIds = []

  if(uploadImgSingleComp.value!=null){
    uploadImgSingleComp.value.cleanImg()
  }

  $post($api.userOperate).then((res:any)=>{
    show.value = true
    depts.value = res.data.result.depts
    posts.value = res.data.result.posts
    roles.value = res.data.result.roles
  })
}
function hideComp(){
  show.value = false
  formRef.value.resetFields()
}

function uploadAvator(webUrl:string){
  form.value.avatar = webUrl
}

function removeImg(){
  console.log("....移除图片")
}

defineExpose({
  showComp,
})
</script>

<style lang="scss" scoped>

</style>
